/*用法如下所示：注意text中不能有换行，可通过jquery的ajax方法$.getJSON远程获取
<div id="flowpic"></div>
<script>
$(function(){
	$('#flowpic').drawFlow({rowSteps:4,steps:[
	     {name:'检查问题',text:'张三于2012-03-02 15:23录入问题，指定责任部门为长沙车间',stat:'comp'},
	     {name:'问题确认',text:'长沙车间已于2012-03-02 18:19确认问题，本问题指派责任人为李四',stat:'comp'},
	     {name:'问题整改',text:'整改措施为：已安排在3月3日天窗点排查问题',stat:'ing'},
	     {name:'问题销号',text:'',stat:'unf'},
	     {name:'问题验证',text:'',stat:'unf'},
	     {name:'销号闭环',text:'',stat:'unf'},
	                               ]});
});
</script>
 */
document.write('<style>');
document.write('#flowpic{width:100%;height:100px;}');
document.write('div.step{width:150px;height:150px;margin:10px 15px;float:left;text-align:center;}');
document.write('div.step div.icon{cursor:pointer;width:120px;height:95px;margin:0px 15px;text-align:center;vertical-align:middle;}');
document.write('div.step div.icon td{font-size:14px;line-height:18px; font-family:黑体; font-weight:bold;text-align:center}');
document.write('.comp1{background:url(../../images/flow/comp1.png) no-repeat;text-align:center;}');
document.write('.comp2{background:url(../../images/flow/comp2.png) no-repeat;text-align:center;}');
document.write('.ing1{background:url(../../images/flow/ing1.png);text-align:center;}');
document.write('.ing2{background:url(../../images/flow/ing2.png);text-align:center;}');
document.write('.unf1{background:url(../../images/flow/unf1.png);text-align:center;}');
document.write('.unf2{background:url(../../images/flow/unf2.png);text-align:center;}');
document.write('div.step div.text{width:100%;height:95px;text-align:center;vertical-align:top;}');
document.write('</style>');
(function($){
	$.fn.drawFlow = function(option){
		var opt = $.extend({},{rowSteps:6,steps:[{name:'开始',stat:'comp',text:''},{name:'结束',stat:'unf',text:''}]},option);
		var th = $('<div></div>').appendTo(this);
		var w = opt.rowSteps*180,h='150px';//h = ((opt.steps.length+opt.rowSteps-1)/opt.rowSteps)*170;
		th.css({width:w+'px',height:h,'overflow':'hidden',position:'relative'});
		for(var i=0;i<opt.steps.length;i++){
			drawStep(opt.steps[i],i,opt.steps.length);
		}
		function drawStep(step,index,max){
			var div = $('<div class="step"></div>');
			var div1 = $('<div class="icon"><table width="100%" height="100%"><tr><td valign="middle"></td></tr></table></div>');
			var div2 = $('<div class="text"></div>');
			div1.find('td').text(step.name);//设置步骤名称
			div1.addClass(step.stat+(index==0||index==max-1?'2':'1'));//添加背景图标，开始结束的为双圆圈，其它为单圆圈
			div2.html(step.text);
			div.append(div1).append(div2);
			th.append(div);
			if(index>0){//从第二步开始，添加箭头到左边
				var img = $('<img src="" style="position:absolute;"/>');
				img.attr('src','../../images/flow/arrow_'+step.stat+'.png');
				var p = div1.position();
				img.css({left:p.left-60,top:p.top+27});
				img.attr({width:92,height:40});
				th.append(img);
			}
		}
	};
})(jQuery);